
<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="美导ID" prop="guideId"
            ><el-input
              v-model="queryParams.guideId"
              placeholder="请输入美导ID"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname"
            ><el-input
              v-model="queryParams.realname"
              placeholder="请输入真实姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="性别" prop="sex"
            ><el-input
              v-model="queryParams.sex"
              placeholder="请输入性别"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="擅长项目" prop="goodAtProject"
            ><el-input
              v-model="queryParams.goodAtProject"
              placeholder="请输入擅长项目"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="审核时间" prop="verifyAt"
            ><el-input
              v-model="queryParams.verifyAt"
              placeholder="请输入审核时间"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="gdguideauthList">
          <el-table-column
            type="selection"
            width="55"
            align="center"
          /><el-table-column
            label="美导ID"
            align="center"
            prop="guideId"
            :show-overflow-tooltip="true"
          /><el-table-column
            label="真实姓名"
            align="center"
            prop="realname"
            :show-overflow-tooltip="true"
          /><el-table-column
            label="性别"
            align="center"
            prop="sex"
            :show-overflow-tooltip="true"
          /><el-table-column
            width="100"
            label="擅长项目"
            align="center"
            prop="goodAtProject"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <el-row
                v-for="(item, index) in JSON.parse(row.goodAtProject)"
                :key="index"
              >
                <el-tag size="mini" type="success"
                  >{{ item.name }}（{{
                    item.expectCommissionPercent
                  }}%）</el-tag
                >
                <br>
              </el-row>
            </template>
          </el-table-column>

          <el-table-column
            label="头像"
            align="center"
            prop="headimgurl"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.headimgurl"
                fit="contain"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column
            label="身份证人像面"
            align="center"
            prop="identityImg"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.identityImg"
                fit="contain"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column
            label="身份证国徽面"
            align="center"
            prop="identityImg1"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.identityImg1"
                fit="contain"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column
            label="职业照"
            align="center"
            prop="profileCover"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.profileCover"
                :preview-src-list="profilePhotoParse(row.profilePhoto)"
                fit="contain"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column
            label="美导介绍"
            align="center"
            prop="intro"
            :show-overflow-tooltip="true"
          /><el-table-column
            label="银行卡"
            align="center"
            prop="bankCard"
            :show-overflow-tooltip="true"
          />
          <!-- //是否认证： -1驳回审核 0没有提交  1审核中  2审核通过 -->
          <el-table-column
            label="审核状态"
            align="center"
            prop="verify"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <el-tag type="danger" v-if="row.verify == -1">审核驳回</el-tag>
              <el-tag type="info" v-if="row.verify == 0">暂未提交</el-tag>
              <el-tag type="warning" v-if="row.verify == 1">审核中</el-tag>
              <el-tag type="success" v-if="row.verify == 2">审核通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="提交时间"
            align="center"
            prop="commitAt"
            :show-overflow-tooltip="true"
          /><el-table-column
            label="审核时间"
            align="center"
            prop="verifyAt"
            :show-overflow-tooltip="true"
          /><el-table-column
            label="创建时间"
            align="center"
            prop="createdAt"
            :show-overflow-tooltip="true"
          /><el-table-column
            label="更新时间"
            align="center"
            prop="updatedAt"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <!-- //是否认证： -1驳回审核 0没有提交  1审核中  2审核通过 -->
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.verify == 1"
                v-permisaction="['admin:gdguideauth:edit']"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                >审核
              </el-button>
              <span v-else style="font-size: 0.8rem">已审核</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageIndex"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改对话框 -->
        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="真实姓名" prop="realname">
              <el-input v-model="form.realname" placeholder="" disabled />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-input
                v-model="form.sex"
                placeholder="用户的性别，值为1时是男性，值为0时是女性"
              />
            </el-form-item>

            <el-form-item label="头像" prop="headimgurl">
              <el-input v-model="form.headimgurl" placeholder="" />
            </el-form-item>
            <el-form-item label="身份证人像面" prop="identityImg">
              <el-input v-model="form.identityImg" placeholder="身份证人像面" />
            </el-form-item>
            <el-form-item label="身份证国徽面" prop="identityImg1">
              <el-input
                v-model="form.identityImg1"
                placeholder="身份证国徽面"
              />
            </el-form-item>
            <el-form-item label="职业照" prop="profileCover">
              <el-input v-model="form.profileCover" placeholder="职业照" />
            </el-form-item>
            <el-form-item label="职业照" prop="profilePhoto">
              <el-input v-model="form.profilePhoto" placeholder="职业照" />
            </el-form-item>
            <el-form-item label="美导介绍" prop="intro">
              <el-input
                type="textarea"
                v-model="form.intro"
                placeholder="美导介绍"
                :autosize="{ minRows: 3, maxRows: 10 }"
              />
            </el-form-item>
            <el-form-item label="银行卡号" prop="bankCard">
              <el-input v-model="form.bankCard" placeholder="用于结算，提现" />
            </el-form-item>

            <el-form-item label="擅长项目" prop="goodAtProject">
              <el-checkbox-group v-model="form.goodAtProject">
                <el-row v-for="(value, index) in projectList" :key="index">
                  <el-checkbox :label="value">{{ value.name }}</el-checkbox>
                  <span v-if="isCheckedProject(value.ID)">
                    <el-input
                      v-model.number="value.commissionPercent"
                      placeholder="项目提成"
                      size="small "
                      style="width: 6rem; margin-left: 1rem"
                    />
                    <span style="margin-left: 0.3rem; font-size: 0.8rem"
                      >% (期望提成: {{ value.expectCommissionPercent }}%)</span
                    >
                  </span>
                </el-row>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="审核" prop="verify">
              <!-- 是否认证： -1驳回审核 0没有提交  1审核中  2审核通过 -->
              <el-select
                v-model="form.verify"
                placeholder="请选择审核执行项"
                clearable
                size="small"
              >
                <el-option label="审核中" value="1" />
                <el-option label="通过审核" value="2" />
                <el-option label="驳回审核" value="-1" />
              </el-select>
            </el-form-item>
            <el-form-item
              label="驳回原因"
              prop="refuse"
              v-if="form.verify == -1"
            >
              <el-input
                type="textarea"
                v-model="form.refuse"
                placeholder="审核驳回原因"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <FileChoose
          ref="fileChoose"
          :dialog-form-visible="fileOpen"
          @confirm="getImgList"
          @close="fileClose"
        />
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import {
  getGdGuideAuth,
  listGdGuideAuth,
  updateGdGuideAuth,
} from "@/api/gdguideauth";

import { getAllProject } from "@/api/gdproject";

import FileChoose from "@/components/FileChoose";

export default {
  name: "GdGuideAuth",
  components: {
    FileChoose,
  },
  data() {
    return {
      projects: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isEdit: false,
      fileOpen: false,
      fileIndex: undefined,
      // 类型数据字典
      typeOptions: [],
      gdguideauthList: [],

      // 关系表类型

      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        guideId: undefined,
        realname: undefined,
        sex: undefined,
        goodAtProject: undefined,
        verifyAt: undefined,
      },
      // 表单参数
      form: { goodAtProject: [] },
      // 表单校验
      rules: {
        guideId: [
          { required: true, message: "美导ID不能为空", trigger: "blur" },
        ],
        realname: [
          { required: true, message: "真实姓名不能为空", trigger: "blur" },
        ],
        sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
        goodAtProject: [
          { required: true, message: "擅长项目不能为空", trigger: "blur" },
        ],
        verifyAt: [
          { required: true, message: "审核时间不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    getAllProject().then((res) => {
      if (res.data == null || typeof res.data == "undefined") {
        return;
      }
      this.projects = res.data;
    });
  },
  computed: {
    projectList: {
      get() {
        if (typeof this.form.goodAtProject != "object") {
          return [];
        }
        let ret = this.projects.map((item) => {
          let find = this.form.goodAtProject.find((el) => {
            return el.ID == item.ID;
          });
          const checked = typeof find != "undefined";
          if (checked) {
            return find;
          }
          return {
            ID: item.ID,
            name: item.name,
            commissionPercent: item.commissionPercent,
            expectCommissionPercent: item.expectCommissionPercent,
          };
        });
        return ret;
      },
      set() {},
    },
  },
  methods: {
    isCheckedProject(projectID) {
      const find = this.form.goodAtProject.find((el) => el.ID == projectID);
      return typeof find != "undefined";
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listGdGuideAuth(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.gdguideauthList = response.data.list;
          this.total = response.data.count;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: undefined,
        guideId: undefined,
        realname: undefined,
        sex: undefined,
        goodAtProject: undefined,
        headimgurl: undefined,
        identityImg: undefined,
        identityImg1: undefined,
        profileCover: undefined,
        profilePhoto: undefined,
        intro: undefined,
        bankCard: undefined,
        verify: undefined,
        commitAt: undefined,
        refuse: undefined,
        verifyAt: undefined,
      };
      this.resetForm("form");
    },
    getImgList: function () {
      this.form[this.fileIndex] =
        this.$refs["fileChoose"].resultList[0].fullUrl;
    },
    fileClose: function () {
      this.fileOpen = false;
    },
    // 关系
    // 文件
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageIndex = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ID = row.ID || this.ids;
      getGdGuideAuth(ID).then((response) => {
        this.form = response.data;
        let goodAtProject = JSON.parse(response.data.goodAtProject);
        this.form.goodAtProject = goodAtProject.map((item) => {
          return {
            ID: item.ID,
            name: item.name,
            commissionPercent: item.commissionPercent,
            expectCommissionPercent: item.expectCommissionPercent,
          };
        });
        this.open = true;
        this.title = "美导审核";
        this.isEdit = true;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      const that = this;
      that.$refs["form"].validate((valid) => {
        if (valid) {
          //处理发送数据
          //验证提成数据错误提示
          let errProject = {};
          that.form.goodAtProject.forEach((el) => {
            if (
              el.commissionPercent <= 0 ||
              el.commissionPercent >= 100 ||
              typeof el.commissionPercent == "undefined"
            ) {
              errProject = el;
            }
          });
          if (JSON.stringify(errProject) != "{}") {
            return that.$message.error(
              errProject.name + " -- 项目抽成填写错误"
            );
          }
          let reqData = Object.assign({}, that.form);
          reqData.goodAtProject = JSON.stringify(reqData.goodAtProject);
          updateGdGuideAuth(reqData).then((response) => {
            if (response.code === 200) {
              that.msgSuccess("修改成功");
              that.open = false;
              that.getList();
            } else {
              that.msgError(response.msg);
            }
          });
        }
      });
    },
    profilePhotoParse(data) {
      if (!data) {
        return;
      }
      let ret = JSON.parse(data);
      return ret;
    },
  },
};
</script>
